<template>
	<view class="app">
	<ReturnComponrnts></ReturnComponrnts>
	<view style='height: 10%;'>&nbsp;</view>
		<view class="content">
			<h2 class="title">
				欢迎登录
			</h2>
			<p>每天都在等快递，不如让快递等你!</p>
			<view class="accountBox loginBox">
				<img src="/static/icon/account.svg" alt="" />
				<input type="text" placeholder="账号" v-model="username"/>
			</view>
			<view class="passwordBox loginBox">
				<img src="/static/icon/password.svg" alt="" />
				<input type="safe-password" password placeholder="密码" v-model="password" />
			</view>
			<button class="loginBtn" @click="loginCheck">登录</button>
			<view class="registerBox">
				<button @click="set">忘记密码</button>
				<button @click="goRegisterPage">注册账号</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {useUserStore} from '../../store/index'
import ReturnComponrnts from '@/components/ReturnComponrnts.vue'
import {userLogin} from '../../api/api'

//控制半模态弹窗
const showModal = useUserStore()
const username = ref('');
const password = ref('');
//登录
const loginCheck = async() => {
	const loginCode = await userLogin(username.value,password.value)
	console.log(loginCode)
	//登录成功
	if(loginCode){
		uni.switchTab({
			url:'/pages/homePage/homePage'
		})
	}
	//登录失败
	if (!loginCode) {
	  uni.showToast({
	    title: '登录失败，请检查账号或密码',
	    icon: 'none'
	  });
	  return;
	}
}

//前往注册
const goRegisterPage = () => {
	uni.navigateTo({
		url:'/pages/registerPage/registerPage'
	})
}

const set =() => {
	console.log(username.value,password.value)
}
</script>

<style lang="scss" scoped>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.app{
	background: linear-gradient(to bottom right, #d0f5e7, #ffffff);
	width: 100vw;
	height: 100vh;
	padding: 20rpx 30rpx;

	.content{
		margin: 0 auto;
		max-width: 500px;
		width: 100%;
		border-radius: 30rpx;
		box-shadow: 3px 3px 10px #333;
		background-color: #fff;
		
		padding: 20rpx;
		box-sizing: border-box;
		.title{
			width: 100%;
			font-size: 60rpx
		}
		p{
			color: #666;
			margin-bottom: 50rpx;
		}
		.loginBox{
			border-radius:15rpx ;
			box-sizing: border-box;
			padding: 0 10rpx;
			width: 100%;
			height: 90rpx;
			background-color: #f1f1f1;
			margin: 40rpx auto;
			display: flex;
			img{
				width: 60rpx;
				height: 100%;
			}
			input{
				flex: 1;
				height: 100%;
			}
		}
		.loginBtn{
			border:none;
			width: 100%;
			height: 90rpx;
			background-color: #d0f5e7;
			margin: 20rpx auto;
		}
		.registerBox{
			width: 100%;
			display: flex;
			justify-content: space-between;
			button{
				background-color: transparent;
				border: 0;
				font-size: 32rpx
			}
			button::after{
				border: none;
			}
		}
	}
}
</style>
